
import { listOrderData } from '@/api/home'
import React, { useEffect, useState } from 'react'
import * as Icons from '@ant-design/icons';
import './index.css'

function Index() {

  const [todayData, setTodayData] = useState([])
  const [monthData, setMonthData] = useState([])

  useEffect(() => {
    listOrderData().then((res) => {
      const today = res.data.todayOrderDate.map((t) => {
        return {
          ...t,
          icon: React.createElement(Icons[t.icon])
        }
      })
      const month = res.data.monthOrderDate.map((m) => {
        return {
          ...m,
          icon: React.createElement(Icons[m.icon])
        }
      })
      setTodayData(today)
      setMonthData(month)
    })
  }, [])

  return (
    <div className='home-order-container'>
      <div className='order-col' style={{ "marginBottom": "10px" }}>
        {todayData.map((t) => (
          <div className='order-container' key={t.id}>
            <div className='order-icon' style={{ 'backgroundColor': t.color }}>
              {t.icon}
            </div>
            <div className='order-info'>
              <div>￥{t.salesVolume}</div>
              <div>{t.name}</div>
            </div>
          </div>
        ))}
      </div>
      <div className='order-col'>
        {monthData.map((t) => (
          <div className='order-container' key={t.id}>
            <div className='order-icon' style={{ 'backgroundColor': t.color }}>
              {t.icon}
            </div>
            <div className='order-info'>
              <div>￥{t.salesVolume}</div>
              <div>{t.name}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Index
